<template>
	<view>
		<!-- 退款底部弹出层 -->
		<u-popup :show="isShow" closeOnClickOverlay @close="isShowFalse"
		         round="45rpx" closeIconPos>
		    <view class="cancel-storey">
		        <view class="title-box">
		            <u-icon @click="isShowFalse" name="close"></u-icon>
		            <view class="title">{{popupTitle}}</view>
		        </view>
		        <view>
		            <u-radio-group iconPlacement="right" borderBottom placement="column" activeColor="#FF0000">
		                <u-radio :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in radiolist" :key="index"
		                         :label="item.name" :name="item.name" @change="radioChange">
		                </u-radio>
		            </u-radio-group>
		        </view>
				<view v-if="cancellationOrder.textareaShow">
					<u--textarea v-model="cancellationOrder.textareaText" placeholder="请输入内容" ></u--textarea>
				</view>
		        <button @click="clickConfirm()" class="btn">确认</button>
		    </view>
		</u-popup>
	</view>
</template>

<script setup>
	/**
	 * isShow 组件是否显示
	 * popupTitle 组件标题
	 * radiolist  组件列表
	 * 
	 * @clickConfirm 组件点击确认
	 * @isShowFalse  通知父组件关闭退款弹出框
	**/
	
	import { ref, reactive, defineEmits, defineProps } from 'vue'
	
	const props = defineProps(['isShow','popupTitle','radiolist'])
	const emit = defineEmits(['clickConfirm','isShowFalse'])
	
	// 取消订单原因弹出框
	let cancellationOrder = reactive({
	    reason: "",
	    orderId: "",
		textareaShow:false,
		textareaText:""
	})
	
	// 选中的取消原因
	const radioChange = (e) => {
		if(e=='其他'){
			cancellationOrder.textareaShow = true
		}else{
			cancellationOrder.textareaShow = false
		}
	    cancellationOrder.reason = e
	}
	
	// 确认选中列表元素
	const clickConfirm = () =>{
		if(cancellationOrder.reason=='其他'){
			emit('clickConfirm',cancellationOrder.textareaText)
		}else{
			emit('clickConfirm',cancellationOrder.reason)
		}
	}
	
	// 通知父组件关闭组件
	const isShowFalse = () =>{
		emit('isShowFalse')
	}
	
</script>

<style scoped lang="scss">
	.cancel-storey {
	    height: 880rpx;
	    padding: 50rpx;
	    position: relative;
	
	    .title-box {
	        display: flex;
	        height: 80rpx;
	        align-items: center;
	    }
	
	    .title {
	        text-align: center;
	        font-size: 30rpx;
	        font-weight: 600;
	        flex: 1;
	    }
	
	    .btn {
	        position: absolute;
	        bottom: 30rpx;
	        left: 0;
	        right: 0;
	        width: 650rpx;
	        background-color: #ff1b1b;
	        height: 77rpx;
	        border-radius: 77rpx;
	        color: #fff;
	        line-height: 77rpx;
	        font-size: 30rpx;
	        margin: 0 auto;
	    }
	}
</style>